<template>
  <div class="vehicle-type-management">
    <el-card
      style="margin-bottom: 20px;"
      shadow="never"
    >
      <div class="search__container">
        <div class="search__container__ipt">
          <div class="title">车型：</div>
          <el-input
            v-model="params.name"
            placeholder="请输入类型名称"
            style="width: 85%;"
          />
        </div>
        <el-button type="danger" @click="reset">重置</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </el-card>

    <el-card
      style="margin-bottom: 20px;"
      shadow="never"
    >
      <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="addVehicleType">添加车型信息</el-button>
      </div>
      <div class="tips">
        <el-alert
          title="注：系统默认的车型不可操作"
          type="warning"
          show-icon
        />
      </div>
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="name" label="车型" align="center" />
        <el-table-column label="是否系统默认" align="center">
          <template v-slot="{ row }">
            <i
              :class="[
                row.company_id ? 'el-icon-close' : 'el-icon-check'
              ]"
              class="icon"
            />
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center">
          <template v-slot="{ row }">
            {{ timeFormat(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              :disabled="!row.company_id"
              type="primary"
              size="mini"
              @click="editVehicleType(row)"
            >
              编辑
            </el-button>

            <el-button
              :disabled="!row.company_id"
              type="danger"
              size="mini"
              @click="deleteVehicleType(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <Pagination
          v-if="total"
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :limit="params.paginate"
          :page="params.page"
          @pagination="pagination"
        />
      </div>
    </el-card>

    <el-dialog
      :visible.sync="visible"
      :title="formData.id ? '修改车型信息' : '创建车型信息'"
      width="30%"
    >
      <el-form
        ref="elFormRef"
        :model="formData"
        label-position="left"
        :rules="rules"
      >
        <el-form-item prop="name" label="车型" label-width="60px">
          <el-input
            v-model="formData.name"
            placeholder="请输入车型"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          @click="onConfirm"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getVehicleType, createVehicleType, editVehicleType, deleteVehicleType } from '@/api/vehicleService'
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination/index.vue'
export default {
  name: '',
  components: { Pagination },
  data() {
    return {
      list: [],
      params: {
        name: '',
        page: 1,
        paginate: 10
      },
      formData: {
        name: ''
      },
      total: 0,
      visible: false,
      rules: {
        name: [
          { required: true, message: '请输入车型', trigger: ['change', 'blur'] }
        ]
      },
      btnLoading: false,
      loading: false
    }
  },
  created() {
    this.getVehicleType()
  },
  methods: {

    addVehicleType() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.elFormRef.resetFields()
      })
    },

    editVehicleType(row) {
      const { id, name } = row
      this.formData.id = id
      this.formData.name = name
      this.visible = true
    },

    deleteVehicleType(row) {
      this.$confirm(
        '是否删除该项？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.deleteVehicleTypeFetch(row.id)
      })
    },

    onConfirm() {
      this.$refs.elFormRef.validate(valid => {
        if (!valid) {
          return this.$message.error('请将信息填写完整！')
        }
        if (this.formData.id) {
          this.editVehicleTypeFetch()
        } else {
          this.addVehicleTypeFetch()
        }
      })
    },

    async addVehicleTypeFetch() {
      try {
        this.btnLoading = true
        await createVehicleType(this.formData)
        this.$message.success('创建成功')
        this.refresh()
        this.visible = false
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '创建失败')
      } finally {
        this.btnLoading = false
      }
    },

    async editVehicleTypeFetch() {
      this.btnLoading = true
      try {
        await editVehicleType(this.formData)
        this.$message.success('修改成功')
        this.refresh()
        this.visible = false
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '修改失败')
      } finally {
        this.btnLoading = false
      }
    },

    async deleteVehicleTypeFetch(id) {
      try {
        await deleteVehicleType(id)
        this.$message.success('删除成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '删除失败')
      }
    },

    refresh() {
      this.params = this.$options.data().params
      this.formData = this.$options.data().formData
      this.getVehicleType()
    },

    async getVehicleType() {
      try {
        this.loading = true
        const res = await getVehicleType(this.params)
        this.list = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '车型列表获取失败')
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 500)
      }
    },

    reset() {
      this.params = this.$options.data().params
      this.getVehicleType()
    },

    search() {
      this.params.page = 1
      this.getVehicleType()
    },

    timeFormat(t, format = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(t).format(format)
    },

    pagination(e) {
      this.params.page = e.page
      this.params.paginate = e.limit
      this.getVehicleType()
    }
  }
}
</script>
<style lang="scss" scoped>
.vehicle-type-management {
  padding: 20px;
  .search__container {
    display: flex;

    &__ipt {
      width: 30%;
      margin-right: 10px;
      display: flex;
      align-items: center;
      .title {
        flex: 1;
        font-weight: bold;
      }
    }

  }

  .pagination {
    display: flex;
    justify-content: end;
  }

  .tips{
    margin-bottom: 20px;
  }

}

.icon {
  font-size: 20px;
}

::v-deep(.el-card) {
  border: none;
}
</style>
